<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>微信聊天室</title>
    <link rel="stylesheet" href="styles/normalize.css">
    <link rel="stylesheet" href="styles/reset.css">
    <link rel="stylesheet" href="styles/chart.css">
</head>

<body>
    <div id="login-container">
        <div class="login-title">微信聊天室</div>
        <div class="login-user-icon">
            <img src="images/login.png" alt="">
        </div>
        <div>
            <input type="text" id="username" class="login-item login-username" placeholder="请输入聊天昵称">
        </div>
        <div>
            <input type="button" id="login" class="login-item login-button" value="登录">
        </div>
    </div>
    <script>
        //   为login登录按钮绑定click事件
        let btn = document.getElementById('login');
        btn.addEventListener('click', () => {
            //   获取昵称与头像信息
            let name = document.getElementById('username').value;
            let avatar = Math.floor(Math.random() * 100) + '.jpg';
            let url = `chart.html?name=${name}&avatar=${avatar}`;
            location = url; //跳转到url新路径
        })
    </script>
</body>

</html>